<template>
    <div>
        <CheckboxGroup
            class="toggle-list"
            v-model="pageStatus"
            @on-change="routePageStatus"
            v-show="visible.toggleList"
        >
            <Tooltip placement="bottom" theme="light">
                <Badge :count="warningCount.personnel">
                    <Checkbox label="Personnel">
                        <i class="icon icon-personnel"></i>
                    </Checkbox>
                </Badge>
                <div slot="content">
                    <div class="title">人员</div>
                    <div class="subtitle">Personnel</div>
                </div>
            </Tooltip>
            <Tooltip placement="bottom" theme="light">
                <Badge :count="warningCount.towerCrane">
                    <Checkbox label="TowerCrane">
                        <i class="icon icon-tower-crane"></i>
                    </Checkbox>
                </Badge>
                <div slot="content">
                    <div class="title">塔吊</div>
                    <div class="subtitle">TowerCrane</div>
                </div>
            </Tooltip>
        </CheckboxGroup>
        <button
            class="c-button c-button-return field"
            @click="returnConstructionPage"
        >
            <span class="text">返回</span>
        </button>
        <vw-right v-show="visible.dataPanel">
            <vw-row>
                <vw-box box-name="环境监测" box-type="train">
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-temperature"
                            title="温度"
                            :number="dataPanel.temperature"
                            unit="°C"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-humidity"
                            title="湿度"
                            :number="dataPanel.humidity"
                            unit="%"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-wind-speed"
                            title="风速"
                            :number="dataPanel.windSpeed"
                            unit="m/s"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-noise"
                            title="噪音"
                            :number="dataPanel.noise"
                            unit="%"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-pm25"
                            title="PM2.5"
                            :number="dataPanel.pm25"
                            unit="ug/m³"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-pm10"
                            title="PM10"
                            :number="dataPanel.pm10"
                            unit="ug/m³"
                        ></vc-icon-card>
                    </vw-box-item>
                </vw-box>
            </vw-row>
            <vw-row>
                <vw-box box-name="人员环境" box-type="train">
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-worker-amount"
                            title="总人数"
                            :number="dataPanel.workerAmount"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-worker-registered"
                            title="在册人数"
                            :number="dataPanel.workerRegistered"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-worker-field"
                            title="在场人数"
                            :number="dataPanel.workerField"
                        ></vc-icon-card>
                    </vw-box-item>
                </vw-box>
            </vw-row>
            <vw-row>
                <vw-box box-name="告警事件" box-type="train">
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-construction-warning-count"
                            title="告警次数"
                            :number="dataPanel.warningCount"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%">
                        <vc-icon-card
                            icon-name="icon-construction-warning-type"
                            title="告警事件类型"
                            :number="dataPanel.warningType"
                        ></vc-icon-card>
                    </vw-box-item>
                    <vw-box-item width="33.33%"></vw-box-item>
                    <vw-box-item
                        width="100%"
                        :style="{ marginTop: 16 * ratio + 'px' }"
                    >
                        <Table
                            :columns="tableData.columns"
                            :max-height="195 * ratio"
                            :data="tableData.rows"
                        ></Table>
                    </vw-box-item>
                </vw-box>
            </vw-row>
            <vw-row>
                <vw-box box-name="全过程记录" box-type="tower">
                    <vw-box-item>
                        <div class="carousel-wrapper">
                            <Carousel
                                autoplay
                                loop
                                arrow="never"
                                v-model="carouselIndex.group1"
                                :radius-dot="true"
                                :height="200 * ratio"
                            >
                                <CarouselItem
                                    v-for="(item, index) in videoSrc.group1"
                                    :key="'vs1-' + index"
                                >
                                    <vm-video-player
                                        :src="item.url"
                                        :width="424 * ratio"
                                        :height="200 * ratio"
                                        :title="item.title"
                                    ></vm-video-player>
                                </CarouselItem>
                            </Carousel>
                            <div class="title">
                                {{
                                    videoSrc.group1[carouselIndex.group1].title
                                }}
                            </div>
                            <button
                                class="c-button icon-button"
                                @click="
                                    popVideoWindow(
                                        videoSrc.group1[carouselIndex.group1]
                                            .url,
                                        videoSrc.group1[carouselIndex.group1]
                                            .title
                                    )
                                "
                            >
                                <i class="icon icon-fullscreen"></i>
                            </button>
                        </div>
                    </vw-box-item>
                    <vw-box-item>
                        <ul class="grid">
                            <li
                                class="grid-item"
                                v-for="(item, index) in videoSrc.group1"
                                :key="'grd-' + index"
                            >
                                <vm-video-player
                                    :src="item.url"
                                    :width="166 * ratio"
                                    :height="90 * ratio"
                                    :title="item.title"
                                ></vm-video-player>
                                <div class="title">
                                    {{
                                        videoSrc.group1[index].title
                                    }}
                                </div>
                                <button
                                    class="c-button icon-button"
                                    @click="
                                        popVideoWindow(
                                            videoSrc.group1[index].url,
                                            videoSrc.group1[index].title
                                        )
                                    "
                                >
                                    <i class="icon icon-fullscreen"></i>
                                </button>
                            </li>
                        </ul>
                    </vw-box-item>
                </vw-box>
            </vw-row>
        </vw-right>
    </div>
</template>

<script>
    import bus from "@/lib/bus";
    import { _Space, _POI, _Path } from "@/lib/vmixs";

    export default {
        name: "",
        data() {
            return {
                //layout
                ratio: JSON.parse(localStorage.ratio),
                //interactive
                pageStatus: [],
                visible: {
                    toggleList: true,
                    dataPanel: true,
                },
                //data
                warningCount: {
                    personnel: 0,
                    towerCrane: 0,
                },
                dataPanel: {
                    temperature: 25,
                    humidity: 60,
                    windSpeed: 0.5,
                    noise: 50,
                    pm25: 16,
                    pm10: 0.15,
                    workerAmount: 381,
                    workerRegistered: 381,
                    workerField: 346,
                    warningCount: 20,
                    warningType: 8,
                },
                carouselIndex: {
                    group1: 0,
                },
                videoSrc: {
                    group1: [
                        {
                            url: "https://www.w3school.com.cn//i/movie.mp4",
                            title: "好大一只熊1",
                        },
                        {
                            url: "https://www.w3school.com.cn//i/movie.mp4",
                            title: "好大一只熊2",
                        },
                        {
                            url: "https://www.w3school.com.cn//i/movie.mp4",
                            title: "好大一只熊3",
                        },
                    ],
                },
                tableData: {
                    columns: [
                        {
                            title: "时间",
                            key: "time",
                        },
                        {
                            title: "事件",
                            key: "event",
                        },
                        {
                            title: "状态",
                            key: "status",
                        },
                    ],
                    rows: [
                        {
                            time: "2020-12-21 10:45",
                            event: "安全隐患",
                            status: "未处理",
                            cellClassName: {
                                status: "bullet-red",
                            },
                        },
                        {
                            time: "2020-12-21 10:45",
                            event: "安全隐患",
                            status: "已处理",
                            cellClassName: {
                                status: "bullet-green",
                            },
                        },
                        {
                            time: "2020-12-21 10:45",
                            event: "安全隐患",
                            status: "未处理",
                            cellClassName: {
                                status: "bullet-red",
                            },
                        },
                        {
                            time: "2020-12-21 10:45",
                            event: "安全隐患",
                            status: "已处理",
                            cellClassName: {
                                status: "bullet-green",
                            },
                        },
                        {
                            time: "2020-12-21 10:45",
                            event: "安全隐患",
                            status: "已处理",
                            cellClassName: {
                                status: "bullet-green",
                            },
                        },
                        {
                            time: "2020-12-21 10:45",
                            event: "安全隐患",
                            status: "已处理",
                            cellClassName: {
                                status: "bullet-green",
                            },
                        },
                    ],
                },
            };
        },
        mixins: [_Space, _POI, _Path],
        components: {
            "vc-icon-card": () => import("../../components/IconCard"),
            "vm-video-player": () => import("../../components/media/VideoPlayer"),
        },
        created(){
            this.listenWindowEvent();
        },
        watch: {
            pageStatus: {
                handler(n, o) {
                    if (n instanceof Array) {
                        let pageStatusName = n[0];
                        if (pageStatusName) {
                            const statusHashMap = {
                                Personnel: this.setState_Personnel,
                                TowerCrane: this.setState_TowerCrane,
                            };
                            statusHashMap[n].call();
                        } else {
                            //执行方法，页面回到初始状态
                            this.setState_Initial();
                        }
                    }
                },
                immediate: true,
                deep: true,
            },
        },
        methods: {
            setState_Initial() {
                //清空场景内的POI，场景镜头聚焦
                //this.CameraObj.clear();
                //this.clearUECreatures();
                //调用工地的非标SuperAPI
                //this.CameraObj.setOn(this.camera.init);
            },
            setState_Personnel() {
                //渲染场景内的人员POI
                //this.CameraObj.clear();
                //this.RenderPOI('fake-promise','params');
                //this.CameraObj.focusOn('POI');
            },
            setState_TowerCrane() {
                //渲染场景内的塔吊POI
                //this.CameraObj.clear();
                //this.RenderPOI('fake-promise','params');
                //this.CameraObj.focusOn('POI');
            },
            listenWindowEvent(){
                bus.$on('window-event',msg=>{
                    //监听“查看历史轨迹”按钮点击后的事件
                    //条件逻辑
                    //this.RenderPath('fake-promise','params');
                })
            },
            routePageStatus() {
                this.pageStatus = [this.pageStatus.tail()];
            },
            returnConstructionPage() {
                this.$router.push({
                    name: "Construction",
                });
            },
            popVideoWindow(url, title) {
                bus.$emit("open-modal", {
                    type: "video",
                    url,
                    title,
                });
            },
        },
    };
</script>

<style lang="" scoped>
</style>